<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="res/css/bootstrap.min.css" rel="stylesheet">
		<link href="res/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="res/css/style.min.css" rel="stylesheet">
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="row">
				<div class="col-sm-6 col-md-3">
					<div class="card bg-danger">
						<div class="card-body clearfix">
							<div class="pull-right">
								<p class="h6 text-white m-t-0">监狱囚犯总数</p>
								<p class="h3 text-white m-b-0 fa-1-5x" id="prisonerCount">无权查看</p>
							</div>
							<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
										class="mdi mdi-account-box-outline fa-1-5x"></i></span>
							</div>
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-3">
					<div class="card bg-primary">
						<div class="card-body clearfix">
							<div class="pull-right">
								<p class="h6 text-white m-t-0">员工总数</p>
								<p class="h3 text-white m-b-0 fa-1-5x" id="empCount">无权查看</p>
							</div>
							<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
										class="mdi mdi-account fa-1-5x"></i></span>
							</div>
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-3">
					<div class="card bg-success">
						<div class="card-body clearfix">
							<div class="pull-right">
								<p class="h6 text-white m-t-0">岗位总数</p>
								<p class="h3 text-white m-b-0 fa-1-5x" id="postCount">无权查看</p>
							</div>
							<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
										class="mdi mdi-buffer fa-1-5x"></i></span>
							</div>
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-3">
					<div class="card bg-purple">
						<div class="card-body clearfix">
							<div class="pull-right">
								<p class="h6 text-white m-t-0">部门总数</p>
								<p class="h3 text-white m-b-0 fa-1-5x" id="departCount">无权查看</p>
							</div>
							<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
										class="mdi mdi-bulletin-board fa-1-5x"></i></span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row">

		<div class="col-lg-6">
			<div class="card">
				<div class="card-header">
					<h4>囚犯分区人数</h4>
				</div>
				<div class="card-body">
					<canvas id="chart-vbar-1" width="400" height="250"></canvas>
				</div>
			</div>
		</div>

				<div class="col-lg-6">
					<div class="card">
						<div class="card-header">
							<h4>各部门人数</h4>
						</div>
						<div class="card-body">
							<canvas id="chart-vbar-2" width="400" height="250"></canvas>
						</div>
					</div>
				</div>

			</div>

			<div class="row">



			</div>

		</div>

		<script type="text/javascript" src="res/js/jquery.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="res/js/main.min.js"></script>


		<script type="text/javascript" src="res/js/Chart.js"></script>
		<script type="text/javascript">
			var pri1 = 0;
			var pri2 = 0;
			$(document).ready(function(e) {


				$.ajax({
					url: '/Final_ssm2/Prisoner/Pri_table?limit=1&offset=0',
					dataType: 'json',
					type: 'get',
					async: false,
					success(res) {
						if (res.total > 0) {
							$("#prisonerCount").text(res.total);
						}

					}
				});
				$.ajax({
					url: '/Final_ssm2/Depart/Der_table?limit=1&offset=0',
					dataType: 'json',
					type: 'get',
					async: false,
					success(res) {
						if (res.total > 0) {
							$("#departCount").text(res.total);
						}
					}
				});
				$.ajax({
					url: '/Final_ssm2/Emp/Emp_table?limit=1&offset=0',
					dataType: 'json',
					type: 'get',
					async: false,
					success(res) {
						if (res.total > 0) {
							$("#empCount").text(res.total);
						}
					}
				});
				$.ajax({
					url: '/Final_ssm2/Post/Post_table?limit=1&offset=0',
					dataType: 'json',
					type: 'get',
					async: false,
					success(res) {
						if (res.total > 0) {
							$("#postCount").text(res.total);
						}
					}
				});

				$.ajax({
					url: '/Final_ssm2/Prisoner/Pri_table?prisex=&partition=二分区&charge=&limit=2&offset=0',
					dataType: 'json',
					type: 'get',
					async: false,
					success(res) {
						if (res.total > 0) {
							pri1 = res.total;
						}
					}
				});
				$.ajax({
					url: '/Final_ssm2/Prisoner/Pri_table?prisex=&partition=一分区&charge=&limit=2&offset=0',
					dataType: 'json',
					type: 'get',
					async: false,
					success(res) {
						if (res.total > 0) {
							pri2 = res.total;
						}
					}
				});
				var departName=[];
				var departCount=[];
				$.ajax({
					url: '/Final_ssm2/Depart/chart',
					dataType: 'json',
					type: 'get',
					async: false,
					success(res) {
						departCount=res.data.departCount;
						departName=res.data.departName;
					}
				});

				new Chart($("#chart-vbar-1"), {
					type: 'bar',
					data: {
						labels: ["一分区", "二分区"],
						datasets: [{
							label: "人数",
							backgroundColor: "rgba(51,202,185,0.5)",
							borderColor: "rgba(0,0,0,0)",
							hoverBackgroundColor: "rgba(51,202,185,0.7)",
							hoverBorderColor: "rgba(0,0,0,0)",
							data: [pri1, pri2]
						}]
					},
					options: {
						scales: {
							yAxes: [{
								ticks: {
									beginAtZero: true
								}
							}]
						}
					}
				});new Chart($("#chart-vbar-2"), {
					type: 'bar',
					data: {
						labels: departName,
						datasets: [{
							label: "人数",
							backgroundColor: "rgba(51,202,185,0.5)",
							borderColor: "rgba(0,0,0,0)",
							hoverBackgroundColor: "rgba(51,202,185,0.7)",
							hoverBorderColor: "rgba(0,0,0,0)",
							data: departCount
						}]
					},
					options: {
						scales: {
							yAxes: [{
								ticks: {
									beginAtZero: true
								}
							}]
						}
					}
				});

			});
		</script>
	</body>
</html>
